import React, { Component } from 'react';
import { NavBar, Icon, Switch, Modal, Toast } from 'antd-mobile';
import './edit.scss'
const alert = Modal.alert;
const element1 =(
  <><img src="images/jg_03.png" alt=""/><p>请完善信息后提交！</p></>
)
export default class componentName extends Component {
  state = {
    checked: false,
    checked1: false,
  }
  render() {
    return (
      <>
      <div className="edit-header">
        <NavBar
          mode="light"
          icon={<Icon type="left"/>}
          onLeftClick={() => {
            alert('信息未保存', '当前内容已发生更变，是否保存后继续?', [
              { text: '取消', onPress: () => console.log('cancel') },
              { text: '保存', onPress: () => {
                window.history.back()
              } },
            ])
          }}
          rightContent={
            <div>
              <span onClick={()=>{
                Toast.info(element1, 1);
              }}>提交</span>
            </div>
          }
        >校园新闻</NavBar>
    </div>
    <div className="edit-content">
      <div className="edit-bt">
        <p>通知标题<span>*</span></p>
        <input type="text" placeholder="请输入标题"/>
      </div>
      <div className="edit-nr">
        <p>通知详情<span>*</span></p>
        <textarea name="" id="textareaa" cols="30" rows="10"  placeholder="请输入新闻详情"></textarea>
      </div>
      <div className="edit-xx">
        <ul>
          <li>
            <span>附件上传</span><span className="spanx">新增附件</span>
          </li>
          <li>
            <span>推送给家长</span><span><Switch
            checked={this.state.checked}
            onChange={() => {
              this.setState({
                checked: !this.state.checked,
              });
            }}
          /></span>
          </li>
          <li>
            <span>推送给班牌</span><span><Switch
            checked={this.state.checked1}
            onChange={() => {
              this.setState({
                checked1: !this.state.checked1,
              });
            }}
          /></span>
          </li>
        </ul>
      </div>
    </div>
    </>
    );
  }
}
